<template>
  <div class="layout-padding">
    <!-- 点检转交记录 -->
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="back" @click="goBack">←返回</div>
      <TableSearch :search="state.search" @search="onSearch" />
      <Table
        ref="tableRef"
        v-bind="state.tableData"
        class="table-demo"
        @pageChange="onTablePageChange"
      >
        <template #default="{ slotData, slotColumn }">
          <div v-if="slotColumn.key === 'batchFlag'">
            {{ slotData.batchFlag === 0 ? '单个转交' : '批量转交' }}
          </div>
        </template>
      </Table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, onMounted, defineAsyncComponent } from 'vue'
import routes from '/@/router'
import { TableDemoPageType } from '/@/types/views'
const Table = defineAsyncComponent(
  () => import('/@/components/table/index.vue')
)
const TableSearch = defineAsyncComponent(
  () => import('/@/components/table/search.vue')
)

// 定义变量内容
const tableRef = ref<RefType>()
const state = reactive<any>({
  tableData: {
    flash: false, // 刷新表格
    // 表头内容（必传，注意格式）
    header: [
      { key: 'orderNum', colWidth: '', title: '点检工单号', type: 'text' },
      { key: 'deviceNum', colWidth: '', title: '设备编号', type: 'text' },
      { key: 'deviceName', colWidth: '', title: '设备名称', type: 'text' },
      { key: 'batchFlag', colWidth: '', title: '转交类型', type: 'slot' },
      { key: 'originalName', colWidth: '', title: '原点检人', type: 'text' },
      {
        key: 'transmitName',
        colWidth: '',
        title: '转交后点检人',
        type: 'text'
      },
      { key: 'reason', colWidth: '', title: '转交原因', type: 'text' },
      { key: 'operateName', colWidth: '', title: '操作人', type: 'text' },
      { key: 'createTime', colWidth: '', title: '转交时间', type: 'text' }
    ],
    columnBtn: [], //操作里面的按钮
    // 配置项（必传）
    config: {
      listApi: '/device/mobile/deviceTransmitRecord/pageList',
      listHttp: 'post',
      total: 0, // 列表总数
      loading: true, // loading 加载
      noPage: false, // 是否分页
      isSerialNo: true, // 是否显示表格序号
      isSelection: false, // 是否显示表格多选
      isOperate: false, // 是否显示表格操作栏
      isExtend: false // 是否可以扩展
    },
    // 搜索参数
    param: {
      // 必传参数，分页的不要传
      transmitType: 3
    }
  },
  // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
  search: {
    param: [
      {
        label: '',
        prop: 'keyword',
        placeholder: '可输入工单号、设备名称、点检人姓名搜索',
        type: 'input'
      },
      {
        label: '时间筛选',
        prop: 'daterange',
        placeholder: '请选择开始时间-结束时间',
        type: 'daterange'
      },
      {
        label: '转交类型',
        prop: 'batchFlag',
        placeholder: '转交类型',
        options: [
          { configValue: '全部', id: '' },
          { configValue: '单个转交', id: 0 },
          { configValue: '批量转交', id: 1 }
        ],
        type: 'select'
      }
    ],
    reset: true
  }
})

// 初始化列表数据
const getTableData = () => {
  state.tableData.flash = !state.tableData.flash
}
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
  state.tableData.param = Object.assign({}, state.tableData.param, { ...data })
  if (
    state.tableData.param.daterange &&
    state.tableData.param.daterange.length != 0
  ) {
    state.tableData.param.startTime = state.tableData.param.daterange[0]
    state.tableData.param.endTime = state.tableData.param.daterange[1]
  } else {
    state.tableData.param.startTime = ''
    state.tableData.param.endTime = ''
  }
  state.tableData.flash = !state.tableData.flash
}

// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
  state.tableData.param.pageNum = page.pageNum
  state.tableData.param.pageSize = page.pageSize
  getTableData()
}

//返回按钮
const goBack = () => {
  routes.go(-1)
}

// 页面加载时
onMounted(() => {
  getTableData()
})
</script>
<style scoped lang="scss">
.back {
  display: inline-block;
  cursor: pointer;
  color: rgba(140, 140, 140, 1);
  margin-bottom: 16px;
}
</style>
